<template>
	<view class="task_release">
		<view class="task_l_item f f_align">
			<view class="task_i_label bold">
				任务标题<text class="request">*</text>
			</view>
			<input v-model="task.title" type="text" maxlength="20" placeholder-style="placeStyle" placeholder="请输入任务标题(20字内)">
		</view>
		<view class="task_l_item f f_align">
			<view class="task_i_label bold">
				任务金额<text class="request">*</text>
			</view>
			<input v-model="task.amount" type="number" maxlength="10" placeholder-style="placeStyle" placeholder="请输入任务金额">
		</view>
		<view class="task_l_item f f_align">
			<view class="task_i_label bold">
				任务名额<text class="request">*</text>
			</view>
			<input v-model="task.number" maxlength="10" type="number" placeholder-style="placeStyle" placeholder="请输入任务名额">
		</view>
		<view class="task_l_item f f_column">
			<view class="task_i_label bold">
				报名条件<text class="request">*</text>
			</view>
			<textarea v-model="task.applyCondition" maxlength="100"  placeholder="请输入报名条件" />
		</view>


		<view class="step_task_t1 f f_column">
			<view class="bold title_task">
				任务步骤<text class="request">*</text>
			</view>
			<view
				class="task_l_item noMb f f_column"
				v-for="(item,index) in stepList" :key="index"
			>
				<view class="task_i_label bold">
					步骤{{item.stepNum}}<text class="request">*</text>
				</view>
				<textarea v-model="item.desc" value="" placeholder="请输入任务内容" />
				<view class="upload_f_warp f f_warp">
					<view class="upload_files_warp" v-if="item.imgUrl && item.imgUrl != ''">
						<view class="upload_files file">
							<i class="iconfont close" @click="deleteFiles(item)">&#xe703;</i>
							<image class="autoImg" :src="item.imgUrl" mode=""></image>
						</view>
					</view>
					<view class="upload_files_warp" v-else @click="uploadFile(item)">
						<view class="upload_files">
							<i class="iconfont">&#xe6f1;</i>
						</view>
					</view>
				</view>
			</view>
			<!-- 添加步骤 -->
			<view class="add_step bold" @click="addSteps">
				<i class="iconfont bold">&#xe709;</i>
				添加步骤
			</view>
		</view>


		<view class="f f_align f_align_center step_bottom_btn">
			<view class="f f_price">
				价格：<view class="f_p_j bold">{{goldCoinAmountAll}}<text class="f_p_t">金币</text></view>
			</view>
			<view class="relese_new" @click="fbTask">立即发布</view>
		</view>

		<!-- 密码验证 -->
		<pwInput ref="pwInput" @input-ok="isOkDone" :isLoading="loadings" />
	</view>
</template>

<script>
	import $uplaod from '../../utils/upload.js'
	import pwInput from '@/components/pwInput/pwInput'
	export default {
		data() {
			return {
				task:{
					title:'',
					number:'',
					amount:'',
					applyCondition:'',
					payAmount:0
				},
				stepList:[
					{
						stepNum:1,
						desc:'',
						imgUrl:''
					}
				],
				goldCoinAmount:0,
				loadings:false
			};
		},
		onShow() {
			this.getRechangeRules();
		},
		computed:{
			goldCoinAmountAll:function(){
				return (this.goldCoinAmount+(Number(this.task.number)*Number(this.task.amount))).toFixed(2);
			}
		},
		methods:{
			//获取任务收费规则
			async getRechangeRules(){
				const _this = this;
				let res = (await _this.$http('/api/auth/charge/rule/getChargeRule','POST','10012002')).data;
				if(res && res.code == '0'){
					_this.goldCoinAmount = res.data.goldCoinAmount;
				}else{
					_this.$showToast(res.msg);
				}
			},
			//删除上传的图片
			deleteFiles(item){
				item.imgUrl = ''
			},
			//选择图片
			uploadFile(item){
				const _this = this;
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success: async (res) => {
						item.imgUrl = await $uplaod(res.tempFilePaths[0]);
					}
				})
			},
			//添加步骤
			addSteps(){
				const _this = this;
				if(_this.stepList.length >= 5){
					return _this.$showToast('最多只能添加五个步骤哦～')
				}
				let obj_ect = {
					stepNum:_this.stepList.length+1,
					desc:'',
					imgUrl:''
				}
				_this.stepList.push(obj_ect);
			},
			//发布任务
			async fbTask(){
				const _this = this;
				if(_this.task.title == ''){
					return _this.$showToast('请输入任务标题')
				}
				if(_this.task.amount == '' || _this.task.amount <= 0){
					return _this.$showToast('请输入任务金额，且大于0')
				}
				if(_this.task.number == '' || _this.task.number <= 0){
					return _this.$showToast('请输入任务名额，且大于0')
				}
				if(_this.task.applyCondition == ''){
					return _this.$showToast('请输入报名条件～')
				}
				for(let i=0;i<_this.stepList.length;i++){
					if(_this.stepList[i].desc == ''){
						return _this.$showToast(`请输入第${i+1}步的任务内容`)
					}
					if(_this.stepList[i].imgUrl == ''){
						return _this.$showToast(`请上传第${i+1}步的任务图片`)
					}
				};
				//是否设置支付密码
				let userInfo = uni.getStorageSync('userInfo') || '';
				if(userInfo.payPassword && userInfo.payPassword != ''){
					//打开密码验证
					_this.$refs.pwInput.visibleToast = true;
				}else{
					uni.showActionSheet({
						itemList:['未设置支付密码，去设置？'],
						success(e) {
							if(e.tapIndex == 0){
								_this.$navTo('../setting/setting')
							}
						}
					})
				};
			},
			async isOkDone(pw){
				const _this = this;
				let postData = _this.task;
				postData.stepList = _this.stepList;
				postData.payAmount = _this.goldCoinAmountAll;
				postData.password = pw;
				_this.loadings = true;
				let res = (await _this.$http('/api/auth/job/createJob','POST',postData)).data;
				_this.$showToast(res.msg);
				_this.loadings = false;
				if(res && res.code == '0'){
					//关闭密码验证
					_this.$refs.pwInput.visibleToast = false;
					_this.$navTo('../myRelease/myRelease?type=1');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.task_release{
		width: 100%;
		min-height: 100vh;
		background-color: #F6F9FE;
		font-size: 28rpx;
		padding-bottom: 110rpx;
		.step_bottom_btn{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;right: 0;
			height: 98rpx;
			background-color: #fff;
			padding-left: 32rpx;
			.relese_new{
				height: 100%;
				width: 272rpx;
				background-color: $ych_color;
				@include flex_center;
				color: #fff;
				font-size: 36rpx;;
			}
			.f_price{
				font-size: 22rpx;
				color: #1A1A1A;
				align-items: flex-end;
				.f_p_j{
					font-size: 40rpx;
					color: #E6212A;
					padding: 0 6rpx;
					.f_p_t{
						font-size: 22rpx;
					}
				}
			}
		}
		.step_task_t1{
			.title_task{
				background-color: #F6F9FE;
				padding:0 24rpx 16rpx;
			}
			.task_l_item{
				border-bottom: solid 2rpx #E6E6E6;
			}
			.add_step{
				@include flex_center;
				padding: 20rpx 0;
				background-color: #fff;
				color: $ych_color;
			}
		}
		.task_l_item{
			padding: 24rpx;
			background-color: #fff;
			margin-bottom: 16rpx;
			input{width: 80%;}
			&.noMb{
				margin-bottom: 0;
			}
			.task_i_label{
				min-width: 140rpx;
			}
			input{
				text-align: right;
			}
			textarea{
				margin-top: 24rpx;
				height: 160rpx;
			}
			.upload_f_warp{
				.upload_files_warp{
					width: 33.333%;
				}
				.upload_files{
					width: 200rpx;height: 200rpx;
					background-color: #f6f6f6;
					@include flex_center;
					margin-top: 20rpx;
					position: relative;
					.iconfont{font-size: 48rpx;}
					&.file{
						background-color: #fff;
					}
					.iconfont.close{
						position: absolute;
						font-size: 48rpx;
						top:-15rpx;right: -15rpx;
						color: #FD2929;
						z-index: 10;
					}
				}
			}
		}
	}
</style>
